import { FC, useCallback, useEffect, useState } from "react";
import Postmate from "postmate";

const Parent: FC = () => {
  const [message, setMessage] = useState<string>();

  // 初始化
  const init = useCallback(() => {
    new Postmate({
      url: "http://localhost:9000/Son.html",
      name: "my-iframe-name"
    }).then(child => {
      console.log("父组件接收", child);
      child.get("sayHello");
      child.on("some-event", (data: string) => setMessage(data));
    });
  }, []);

  useEffect(() => {
    init();
  }, [init]);

  return (
    <>
      <h4>父组件接收来自子组件的消息：{message}</h4>
    </>
  );
};

export default Parent;
